<template>
	<div>
		<Banner :propbanner='bannerList'></Banner>
		<Icon></Icon>
		<Tabs></Tabs>
		<Scroll :propscroll='ScrollList'></Scroll>
		<Lunbo></Lunbo>
		<Spike :propspike='SpikeList'></Spike>
		<Category :propcategroy='CategoryList'></Category>
		<Travel></Travel>
		<BottomNav :propsurl='homeUrl'></BottomNav>
	</div>
	
</template>

<script>
	import {mapState} from 'vuex'
	import Banner from './pages/Banner'
	import Icon from './pages/Icon.vue'
	import Tabs from './pages/Tabs.vue'
	import Scroll from './pages/Scroll.vue'
	import Lunbo from './pages/Lunbo.vue'
	import Spike from './pages/Spike.vue'
	import Category from './pages/Category.vue'
	import Travel from './pages/Travel.vue'
	
	//引入公共子组件——底部
	import BottomNav from	'../default/BottomNav.vue'
	export default{
		name:'Home',
		components:{
			Banner,
			Icon,
			Tabs,
			Scroll,
			Lunbo,
			Spike,
			Category,
			BottomNav,
			Travel
		},
		data(){
			return{
				homeUrl : [require('@/assets/iconimg/nav2-1.png'),require('@/assets/iconimg/nav3-1.png'),require('@/assets/iconimg/nav4-1.png')],
				bannerList:[],
				SpikeList:[],
				ScrollList:[],
				CategoryList:[]
			}
		},
		computed:{
			...mapState(['cityName'])
		},
		//created:当前组件创建之后【el挂在之前（标签未渲染），data函数已经完成初始化】
		//父组件需要将请求的数据给子组件的话，满足：1.data函数已经初始化；2.响应数据传给子组件（组件已渲染）
		//mounted：组件挂载之后【如果接口复杂/多个接口的时候，优先考虑mounted】
		created(){
			//备份
			let that=this
			//向dataHome.json发起异步请求
			this.axios.get('/api/dataHome.json').then( (res)=>{
				let data=res.data.Homemsg[0]
				for(var i in res.data.Homemsg){
					// console.log(res.data.Homemsg[i].city);
					if(res.data.Homemsg[i].city==this.cityName){
						 data=res.data.Homemsg[i]
					}
				}
				that.bannerList=data.BannerVueList;
				that.SpikeList=data.SpikeVueList;
				that.ScrollList=data.ScrolVuelList
				that.CategoryList=data.CategoryVueList
				// console.log(that.CategoryList);
				// console.log(res);
				
				
			} ).catch( (error)=>{
				
				console.log(error);
			
			} );
		}
	}
</script>

<style>
</style>
